<template>
  <div class="titlebar">
    <div class="header">
      <div class="left">
        <div class="left1">
          <img src="../assets/wodeyinyue.png" alt="">
          <span>我的音乐</span>
        </div>
      </div>
      <div class="right">
        <div class="userinfo" @click="loginClick">
          <img src="../assets/avter.png" alt="">
          <span style="margin-left:-20px;">未登录</span>
        </div>
        <div style="width:3px;height:25px;background-color:#ffffff;margin-left:30px;"></div>
        <img src="../assets/zuixiaohua.png" alt=""  @click="minimizeClick" title="最小化">
        <img src="../assets/zuidahua.png" alt="" @click="maximizeClick" title="最大化">
        <img src="../assets/close.png" style="width:40px;height:40px;" alt="" @click="closeAppClick" title="关闭">
      </div>
      <el-dialog
        title="登录"
        append-to-body
        :visible.sync="dialogVisible"
        width="30%"
        :close-on-click-modal="false"
      >
        <div style="margin-left:-40px;">
          <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="账号" prop="username">
              <el-input v-model="ruleForm.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" style="width:100%;" @click="submitForm('ruleForm')">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      searchValue:"",
      dialogVisible:false,
      ruleForm:{
        username:"",
        password:""
      },
      rules: {
          password: [
            {  required: true, message: '请输入密码', trigger: 'blur' }
          ],
          username: [
            {  required: true, message: '请输入用户名', trigger: 'blur' }
          ]
        }
    }
  },
  methods:{
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          return false;
        }
      });
    },
    loginClick(){
      this.dialogVisible=true;
    },
    // 最小化
    minimizeClick(){
      window.ipcRenderer.send('minimize-window')
    },
    // 最大化
    maximizeClick(){
      window.ipcRenderer.send('maximize-window')
    },
    closeAppClick(){
      window.ipcRenderer.send('close-app')
    },
  },
}
</script>
<style lang="scss" scoped>
 .el-dialog__headerbtn{
    background: url('../assets/close.png');
    background-size: cover;
    width:20px;
    height:20px;
    i{
      display:none;
    }
  }
  .titlebar{
    width:100%;
    height:80px;
    background-color: #ec4141;
    .header{
      display:flex;
      align-items:center;
      line-height:80px;
      justify-content:space-between;
      .right{
        display:flex;
        align-items:center;
        .userinfo{
          display:flex;
          align-items:center;
        }
        span{
          display:block;
          color:#ffffff;
        }
        img{
          margin:0 20px;
          width:30px;
          height:30px;
        }
      }
      .left{
        display:flex;
        align-items:center;
        .left1{
          margin-left:15px;
          display:flex;
          align-items:center;
          img{
            width:40px;
            height:40px;
          }
          span{
            font-size:30px;
            display:block;
            color:#ffffff;
          }
        }
      }
    }
  }
</style>
